<!--  -->
<template>
<div class='clock-page'>
  <c-title text="活动详情" :hide="false" ></c-title>
  <div class="clock-head" :class="clockStatus == 1 ?'order-head':''">
    <h3>{{info.title}}</h3>
    <div class="clock-award" @click="awardShow = true">奖励记录</div>
    <div class="flex clock-flex">
      <div class="clock-time flex flex-a-c">
        <div class="status">{{info.status_name}}</div>
        <div class="time">{{info.end_time}}结束</div>
      </div>
    </div>
    <div class="num">已报名{{(info.count_member) || partInfo.count_member || 0}}人次</div>
    <div class="num" v-if="clockStatus == 1 && info.is_continuous == 1">补卡次数{{partInfo.count_supplement}}次</div>
    <div class="clock-task" v-if="clockStatus == 1">
      <div class="task-wrap">
        <h3>打卡任务满足{{info.is_continuous == 1?'连续':''}}打卡{{info.count_day}}天（{{info.is_continuous == 1?partInfo.continuous_day:partInfo.sum_day}}/{{info.count_day || 0}}）</h3>
        <van-progress
          :percentage="percentage"
          pivot-text=""
          stroke-width="6"
          color="var(--themeBaseColor)"
          :show-pivot="false"
        />
      </div>
    </div>
  </div>
  <div class="clock-info "  v-if="clockStatus == 1">
    <div class="info-bottom flex">
      <div class="info-img">
        <van-image
          width="40px"
          height="40px"
          round
          :src="memberInfo.avatar"
        />
      </div>
      <div class="info-wrap flex flex-j-sb">
        <div class="member flex">
          <!--<span class="iconfont icon-icon_edit"></span>-->
          <h3>{{memberInfo.nickname}}</h3>
          <div class="clock-date flex-a-c">
            <div class="date-num">打卡<span>{{partInfo.sum_day}}天</span></div>
            <div class="division-line"></div>
            <div class="date-num">连续打卡<span>{{partInfo.continuous_day}}天</span></div>
          </div>
        </div>
        <div class="wrap-box" >
          <div class="wrap-btn flex-a-c" @click="calendarTo"><span>打卡日历</span><span class="iconfont icon-icon_more11"></span></div>
        </div>
      </div>
    </div>
    <div class="member-date flex flex-j-sb">
      <block v-for="(item,index) in weekArr" :key="index">
        <div class="data-item flex" 
          :class="item.check_in_type == 1?'on':''"
          :style="item.check_in_type == 1?`background:rgba(${coThemeColor},0.16)`:''"  
          >
          <p>{{item.dataName}}</p>
          <span v-if="item.check_in_type == 2">补卡</span>
        </div>
          <!--:style="weekInfo.todayDate == item?`background:rgba(${coThemeColor},0.16)`:''" -->
      </block>
    </div>
  </div>
  <div class="" :class="clockStatus == 0 ?'details-bg':''">
    <div class="details-tab">
      <van-tabs v-model="active" line-width="15" title-active-color="var(--themeBaseColor)" color="var(--themeBaseColor)" title-inactive-color="#00001C">
        <block v-for="(item,index) in memberTab" :key="index">
          <van-tab :title="item.name"></van-tab>
        </block>
      </van-tabs>
    </div>
  </div>
  
  <div class="clock-details"  v-if="active == 0" >
    <div v-html="info.detail"></div>
  </div>
  <div class="clock-record" v-if="active == 1">
    <div class="record-select flex-a-c flex-j-sb" @click="timeShow = true">
      <div class="time-all">{{timeName}}<span class="iconfont icon-icon_down1"></span></div>
      <div class="total">已报{{total}}条</div>
    </div>
  </div>
  <div class="record-list" v-if="active == 1">
    <div v-if="recordData.length > 0">
      <blcok v-for="(item,index) in recordData" :key="index">
        <record-item :itemObj="item" :index="index" :imgPath="imgPath">
          <template v-slot:top>
            <div class="flex">
              <div class="member-btn" v-if="item.is_top == 1 && isAdmin">置顶</div>
              <div class="member-btn" v-if="item.is_hide == 1 && isAdmin">隐藏</div>
            </div>
           
          </template>
          <template v-slot:footer>
            <div class="record-footer flex-a-c flex-j-sb" v-if="isAdmin">
              <div class="footer-box flex-j-c flex-a-c" :class="item.is_hide == 1?'on':''" @click="recordPost(item,'hide')">
                <span class="iconfont icon-fontclass-bukejian"></span>
                <span>隐藏</span>
              </div>
              <div class="footer-box flex-j-c flex-a-c" :class="item.is_top == 1?'on':''" @click="recordPost(item,'top')">
                <span class="iconfont icon-fontclass-zhiding"></span>
                <span>置顶</span>
              </div>
            </div>
          </template>
        </record-item>
      </blcok>
    </div>
    <van-empty
      class="custom-image"
      :image="`${imgPath}check-in-rebate/awardEmpty.png`"
      description="暂无数据"
      v-else
    />
  </div>
  <div class="punch-btn flex-a-c" @click.stop="punchTo"  >我的打卡</div>
  <div class="mb-100"></div>
  <div  class="account-btn"  :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
    <van-button round block type="info"  color="var(--themeBaseColor)" v-if="clockStatus == 0 && info.status == 2" @click="clockOn(clockStatus)">报名参与</van-button>
    <van-button round block type="info"  color="#CFCFCF" v-if="clockStatus == 0 && info.status == 1 ">活动未开始</van-button>
    <van-button round block type="info"  color="#CFCFCF" v-if="clockStatus == 0 && info.status == 3 ">活动已结束</van-button>
    <template v-if="clockStatus == 1">

      <van-button round block type="info"  color="#CFCFCF" 
        v-if="partInfo.is_check_in == 1 && partInfo.is_participate == 1  &&  !partInfo.is_give" >今日已打卡</van-button>
      <van-button round block type="info"  color="#CFCFCF" 
        v-if="partInfo.is_participate == 1  && partInfo.status == 2 && partInfo.is_give" >已领取奖励</van-button>

      <van-button round block type="info"  color="var(--themeBaseColor)" 
        v-if="partInfo.is_give && partInfo.status == 0 && partInfo.is_participate" @click.stop="refundOn">领取奖励</van-button>
      <van-button round block type="info"  color="#CFCFCF" 
        v-if="partInfo.is_give && partInfo.status == 1 && partInfo.is_participate" >审核中</van-button>

      <van-button round block type="info"  color="var(--themeBaseColor)" 
        v-if="partInfo.is_participate == 1 && partInfo.is_check_in == 0 && info.status != 3 && !partInfo.is_give"  @click="ispartOn">打卡</van-button>
      <van-button round block type="info"  color="var(--themeBaseColor)" 
      v-if="partInfo.is_check_in == 0 && partInfo.is_participate == 0 && !partInfo.is_give && info.status != 3"  @click="ispartOn" >打卡未参与</van-button>
      <van-button round block type="info"  color="#CFCFCF" 
        v-if="!partInfo.is_give && info.status == 3">活动已结束</van-button>
    </template>
    
  </div>
  <time-select-pop 
    :timeShow.sync="timeShow" 
    :timeList="timeList" 
    :timeIndex="timeIndex"
    :coThemeColor="coThemeColor"
    @timeSelect="timeSelect"
    @timeConfirm="timeConfirm">
  </time-select-pop>
  <!--:style="{ height: '60%' }"-->
  <van-popup v-model="awardShow" position="bottom" round  :lock-scroll="false" :lazy-render="false" @opened="awardOpen">
    <div class="time-main">
      <div class="time-head flex-a-c flex-j-sb">
        <h3>奖励记录</h3>
        <div class="close-time flex-a-c flex-j-c" @click.stop="awardShow = false">
          <span class="icon-icon_close iconfont"></span>
        </div>
      </div>
      <div class="award-content" ref="handpickList"  style="overflow: hidden;" v-if="awardList.length > 0">
        <div class="flex" style=" flex-direction:column;">
          <block v-for="(item,index) in awardList" :key="index">
            <div class="award-item flex ">
              <div class="award-title flex-a-c flex-j-sb">
                <h3>打卡奖励</h3>
                <p>￥{{item.reward_price}}</p>
              </div>
              <div class="award-time flex-a-c flex-j-sb">
                <h5>{{item.created_at}}</h5>
                <p v-if="item.coupon_num > 0">优惠券：{{item.coupon_num}}张</p>
              </div>
            </div>
          </block>
        </div>
        <div id="awardMore" style="display: inline-block; width: 100%; height: 5rem;"></div>
      </div>
      <van-empty
        class="custom-image"
        :image="`${imgPath}check-in-rebate/awardEmpty.png`"
        description="暂无数据"
        v-else
      />
    </div>
  </van-popup>
  
 
  
</div>
</template>

<script>
import clockDetails_controller from "./clockDetails_controller";
export default clockDetails_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.clock-task ::v-deep .van-progress {
  background:rgba(241, 83, 83, 0.16)
}

.clock-page ::v-deep .clock-details  img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
  margin:0;
}
.clock-details {
  word-wrap: break-word;
}
.details-tab ::v-deep .van-tabs__nav  {
  background-color: transparent;
}
.details-tab ::v-deep .van-tabs__line {
  bottom: 1.25rem;
}

.mb-100 {
  height: 6.25rem;
  clear: both;
}
.pcStyle .clock-page .account-btn {
  position: fixed;
  width: 23.4375rem;
  left:50%;
  bottom: 0;
  transform: translate(-50%, 0%);
  margin: 0 auto;
}
.punch-btn {
  width:3.5rem;
  height: 3.5rem;
  // line-height: 3.5rem;
  padding:0 0.625rem;
  border-radius: 50%;
  position: fixed;
  top: 65%;
  transform: translateY(-50%);
  right: 0.625rem;
  z-index: 99;
  color:#fff;
  font-size: 0.875rem;
  background-color: rgba(0,0,0,0.3);
  text-align: center;
  word-wrap: break-word;
}

.mh-88 {
  height: 5.5rem;
  clear: both;
}
  .clock-page {
    .clock-head {
      background: #F5F5F5;
      border-radius: 0rem 0rem 0rem 0rem;
      // background: linear-gradient( 180deg, #F15353 0%,#F15353 50%, #F5F5F5 100%);
      background-color: var(--themeBaseColor);
      padding:1.25rem 0.75rem 0.625rem 0.75rem;
      position: relative;
      
      h3 {
        font-size: 1.25rem;
        color: #FFFFFF;
        line-height: 1.5rem;
        text-align: left;
        width:80%;
      }
      .clock-flex {
        padding:0.75rem 0;
      }
      .clock-award {
        border-radius: 1rem 0rem 0rem 1rem;
        background-color: rgba(255,255,255,0.3);
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 0.75rem;
        color: #FFFFFF;
        position: absolute;
        right:0;
        top:1.25rem;
        padding:0.375rem 0.5rem 0.375rem 0.625rem;
      }
      .clock-time {
        background: rgba(255,255,255,0.3);
        border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
        padding: 0.1875rem;
        .status {
          font-weight: 500;
          font-size: 0.75rem;
          line-height: 0.75rem;
          color: var(--themeBaseColor);
          background: #FFFFFF;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          padding:0.25rem 0.5rem;
        }
        .time {
          font-size: 0.8125rem;
          line-height: 0.8125rem;
          color: #FFFFFF;
          padding:0 0.625rem 0 0.375rem;
        }
      }
      .num {
        font-weight: 400;
        font-size: 0.8125rem;
        color: #FFFFFF;
        text-align: left;
        padding:0 0 1rem 0;
      }
      .clock-task {
        background: linear-gradient( 131deg, #FFF1F1 0%, #FFFBF2 45%, #F6FFFF 100%);
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
        border: 0.125rem solid #FFFFFF;
        padding:1rem 0.75rem;
        h3 {
          font-weight: 500;
          font-size: 0.9375rem;
          color: #00001C;
          padding:0 0 0.75rem 0;
        }
      }
    }
    .order-head {
      background: linear-gradient( 180deg, var(--themeBaseColor) 0%,var(--themeBaseColor) 50%, #F5F5F5 100%);
    }
    .clock-info {
      margin:0.625rem 0.75rem 0 0.75rem;
      background-color: #fff;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      padding:0.75rem;
      .info-bottom {
        padding:0 0 0.9375rem 0;
        border-bottom: 0.0625rem solid #F0F0F1;
      }
      .info-wrap {
        padding:0 0 0 0.625rem;
        flex:1;
        .member {
          text-align: left;
          flex-direction: column;
          h3 {
            font-size: 0.9375rem;
            color: #00001C;
           
            .icon-icon_edit {
              color:#999;
              padding:0 0 0 0.3125rem;
            }
          }
          .clock-date {
            padding:0.5rem 0 0 0;
            font-weight: 500;
            font-size: 0.8125rem;
            color: #3B3B4A;
            .date-num {
              span {
                color:var(--themeBaseColor);
                
              }
            }
            .division-line {
              width:0.0625rem;
              height: 0.625rem;
              background-color: #AAAAB3;
              margin:0 0.625rem;
            }
          }
        }
        .wrap-box {
          display: inline;
        }
        .wrap-btn {
          background: #FFFFFF;
          border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
          border: 0.0625rem solid #D6D6DC;
          padding:0.5rem 0.625rem;
          font-size: 0.8125rem;
          line-height: 0.8125rem;
          color: #999999;
          .icon-icon_more11 {
            font-size: 0.875rem;
          }
          // display:inline-block;
        }
      }
      .member-date {
        padding:0.75rem 0 0 0;
        .data-item {
          font-weight: 500;
          flex-direction: column;
          min-width: 2.3438rem;
          color: #00001C;
          background: #F5F5F5;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          padding: 0.625rem 0.625rem 0.25rem 0.625rem;
          min-height: 2.375rem;
          p {
            font-size: 0.9375rem;
            line-height: 0.9375rem;
          }
          span {
            font-size: 0.5625rem;
            line-height: 0.5625rem;
            color: var(--themeBaseColor);
          }
        }
        .on {
          color: var(--themeBaseColor);
          // background-color: rgba(241, 83, 83, 0.16);
        }
      }
    }
    .details-bg {
      background: linear-gradient( 180deg, #FFFFFF 0%, #F5F5F5 100%);
      border-radius: 0.9375rem 0.9375rem 0rem 0rem;
      margin:-0.625rem 0 0 0;
      z-index: 10;
      position: relative;
    }
    .details-tab {
      width:42%;
      margin:0 0.75rem;
    }
    .clock-record {
      margin:0.625rem  0.75rem 0 0.75rem;
      .record-select {
        background: #FFFFFF;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        padding:0.625rem 0.75rem;
        margin: 0 0 0.625rem 0;
        .time-all {
          font-size: 0.875rem;
          color: #00001C;
          .icon-icon_down1 {
            color:#999999;
            font-size: 0.875rem;
            padding:0 0 0 0.3125rem;
          }
        }
        .total {
          font-size: 0.8125rem;
          color: #999999;
        }
      }
    }
    .record-list {
      margin:0 0.75rem;
      position: relative;
    }
    .mb-40 {
      height: 2.5rem;
      clear: both;
    }
    .clock-details {
      margin:0.625rem  0.75rem 0 0.75rem;
      padding:0.9375rem 0.75rem;
      background-color: #fff;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      text-align: left;
    }
    .account-btn {
      width:100%;
      background-color: #fff;
      position: fixed;
      left:0;
      bottom:0;
      padding:0.625rem 0.75rem;
    }
  }

  .close {
    position: absolute;
    bottom:4.625rem;
    left:50%;
    transform: translateX(-50%);
    .iconfont {
      font-size: 40px;
      color:#D6D6DC;
    }
  }
  .time-main {
    // height: 100%;

    box-sizing: border-box;
    background: #F5F5F5;
    padding:1.25rem 0.75rem 2.1875rem 0.75rem;
    // overflow-y:scroll;
    .time-head {
      padding:0 0 1rem 0;
      h3 {
        font-weight: bold;
        font-size: 1rem;
        color: #00001C;
      }
      .close-time {
        width: 1.5rem;
        height: 1.5rem;
        background: #F0F0F1;
        border-radius: 50%;
        .icon-icon_close {
          font-size: 0.875rem;
        }
      }
    }
    .custom-image {
      background-color: #fff;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    }
    .award-content {
      box-sizing: border-box;
      width: calc(100%);
      height: 50vh;
      // overflow: hidden;
      // overflow-y: scroll;
      // background-color: #fff;
      position: relative;
    }
    .award-item {
      background: #FFFFFF;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      padding:0.9375rem 0.75rem;
      flex-direction: column;
      margin:0 0 0.625rem 0;
      .award-title {
        padding:0 0 0.625rem 0;
      }
      h3 {
        font-size: 0.9375rem;
        line-height: 0.9375rem;
        color: #00001C;
        font-weight: 400;
      }
      h5 {
        font-size: 0.8125rem;
        line-height: 0.8125rem;
        color: #999999;
        font-weight: 400;
      }
      p {
        font-size: 0.75rem;
        line-height: 0.75rem;
        color: #F15353;
      }
    }
  }
</style>